<template>
  <div>
    <CnBoldP class="mt-11 text-20">用户日志</CnBoldP>
    <CnNormalP class="mt-6 mb-20 text-4xText">查看您在本系统的操作日志</CnNormalP>
    <ProductFilesItem></ProductFilesItem>

    <a-card class="card_box">
      <div class="condition_box">
        <p>
          <span class="label_text">选择时间</span>
          <a-range-picker
            v-model:value="selectTime"
            valueFormat="YYYY-MM-DD"
            @change="tableTimeChange"
          />
        </p>
        <p style="margin-top: 14px">
          <span class="label_text">选择状态</span>
          <!-- <a-range-picker
            v-model:value="selectTime"
            valueFormat="YYYY-MM-DD"
            @change="tableTimeChange"
          /> -->
          <a-radio-group v-model:value="readStatus" @change="readStatusChange">
            <a-radio :value="0">已读</a-radio>
            <a-radio :value="1">未读</a-radio>
          </a-radio-group>
        </p>
      </div>
      <a-table :loading="tableLoading" :dataSource="userLogList" :columns="userLogTableDataColumns">
        <template #status="{text}">
          {{ text == 1 ? '未读' : '已读' }}
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts">
  import {defineComponent, ref, onMounted} from 'vue'
  export default defineComponent({
    name: 'UserLog'
  })
</script>
<script lang="ts" setup>
  // 引入
  import {getUserId} from '@/libs/auth'
  import {userLogType, userLogListType} from './type.ts'
  import {ProductFilesItem} from '@/components/others/productFilesItem'
  import {CnNormalP, CnBoldP} from '@/components/text'
  import {selectUserLogListByPageApi} from '@/api/userLog.ts'

  // 表格选择时间的change事件
  const tableTimeChange = (e: any) => {
    if (e == null) return
    startTime.value = selectTime.value[0] + ' 00:00:00'
    endTime.value = selectTime.value[1] + ' 23:59:59'
    getUserLogListFunc()
  }

  // 状态单选组的Change事件
  const readStatusChange = () => {
    console.log(readStatus.value)
    getUserLogListFunc()
  }

  /* 数据 -------------------------- */

  // 用户日志数据列表
  const userLogList = ref<userLogListType>([])

  // 用户日志表格字段规则
  const userLogTableDataColumns = ref([
    {
      title: '日志内容',
      dataIndex: 'userLogContent'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      title: '日志状态',
      dataIndex: 'status',
      slots: {
        customRender: 'status'
      }
    }
  ])

  // 当前页码
  const currentPage = ref(1)

  // 开始时间和结束时间的数据
  const startTime = ref('')
  const endTime = ref('')

  // 选择时间的数据
  const selectTime = ref('')

  // 每页多少条数据
  const pageSize = ref(15)

  // 总共多少条数据
  const total = ref(0)

  // 当前选择的是什么状态
  const readStatus = ref('')

  // 获取用户日志列表的函数
  const getUserLogListFunc = async () => {
    tableLoading.value = true
    let data = {
      platFormSubUserId: getUserId(),
      startTime: startTime.value,
      endTime: endTime.value,
      page: currentPage.value,
      size: pageSize.value,
      status: readStatus.value
    }
    const res = await selectUserLogListByPageApi(data)
    userLogList.value = res.data.list
    total.value = res.data.total

    tableLoading.value = false

    console.log(userLogList.value, 'userLogList')
    console.log(total.value, 'total')
  }

  // 表格加载的标识
  const tableLoading = ref(false)

  // 初始化
  onMounted(() => {
    getUserLogListFunc()
  })
</script>

<style lang="less" scoped>
  .card_box {
    min-height: 580px;
    // height: 0vh;
    border-radius: 5px;

    .condition_box {
      padding: 0px 0px 20px 0px;
      .label_text {
        color: rgb(49, 69, 106);
        padding: 0px 0px 0px 6px;
        letter-spacing: 1px;
        font-size: 15px;
        margin-right: 12px;
        font-weight: 700 !important;
        font-family: kaigengo-bold;
        --tw-text-opacity: 1 !important;
        // color: rgb(41 48 53 / var(--tw-text-opacity)) !important;
      }
    }
  }
</style>
